<template>
	<div class="page">
		<v-card :isOperate="isOperate" v-if="cardShow" @close="cardShow = false" @submitAction="submitAction" :isAdd="isAdd"
		 :rowData="rowData"></v-card>
		<v-top-bar @show="showAddCard" @handleSearch="handleSearch"></v-top-bar>
		<el-table :data="tableData" v-loading="loading" border>
		<el-table-column  label="编号" width="50">
		</el-table-column>
		<el-table-column prop="name" label="用户名" width="100">
		</el-table-column>
		<el-table-column prop="date" label="角色" width="120">
		</el-table-column>
		<el-table-column prop="address" label="手机号码">
		</el-table-column>
		<el-table-column prop="likes" label="邮箱">
		</el-table-column>
		<el-table-column label="操作" width="120">
			<template v-slot:default="scope">
				<div class="btns">
					<el-button type="danger" @click="handleDelete(scope)">
						<i class="el-icon-delete"></i>
					</el-button>
				</div>
			</template>
		</el-table-column>
			</el-table-column>
		</el-table>
		<el-pagination class="pagi" background layout="prev, pager, next" :total="total" @current-change="sizeChange">
		</el-pagination>
	</div>
</template>

<script>
	import TopBar from '@/components/main/TopBar.vue'
	import Card from '@/components/main/Card.vue'
	import {
		mapMutations
	} from 'vuex'

	export default {
		data() {
			return {
				tableData: [],
				page: {
					size: 10,
					current: 1
				},
				total: 0,
				loading: false,
				title: '添加用户',
				cardShow: false,
				isAdd: true,
				rowData: {},
				isOperate: false
			}
		},
		methods: {
			...mapMutations(['addBread']),
			sizeChange(data) {
				this.page.current = data
				this.getList(this.page.current)
			},
			initData() {
				this.getList(this.page.current)
				this.getTotal()
			},
			showAddCard() {
				this.isAdd = true
				this.cardShow = true
			},
			submitAction(info) {
				this.isOperate = true
				if (info.isAdd) {
					this.$api.addList({
						rowData: info.rowData
					}).then(() => {
						this.initData()
						this.cardShow = false
						this.isOperate = false
						this.$message({
							message: '添加成功！',
							type: 'success',
							customClass: 'v-message',
							offset: 100
						})
					})
				} else {
					this.$api.updateList({
						rowData: info.rowData
					}).then(() => {
						this.initData()
						this.cardShow = false
						this.isOperate = false
						this.$message({
							message: '修改成功！',
							type: 'success',
							customClass: 'v-message',
							offset: 100
						})
					})
				}
			},
			handleSearch(value) {
				if (value === '') {
					this.$message({
						message: '警告哦，这是一条警告消息',
						type: 'warning'
					});
					 this.getList() 
					return
				}
				this.loading = true
				this.$api.getListByValue({
					value
				}).then(res => {
					this.loading = false
					this.tableData = res.data.list
					this.total = res.data.total
				})
			},
			handleUpdate(scope) {
				this.isAdd = false
				this.cardShow = true
				this.rowData = scope.row
			},
			handleDelete(scope) {
				this.$confirm('你确定要删除这一条数据吗？', '警告', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'danger'
				}).then(() => {
					this.$api.deleteList({
						id: scope.row.id
					}).then(res => {
						this.initData()
						this.$message({
							message: '删除成功！',
							type: 'success',
							customClass: 'v-message',
							offset: 100
						})
					})
				}).catch(err => err)
			},
			getList(current) {
				this.loading = true
				this.$api.getList({
					current
				}).then(res => {
					this.tableData = res.data
					this.loading = false
					document.querySelector('.page').scrollTop = 0
				})
			},
			getTotal() {
				this.$api.getTotal().then(res => {
					this.total = res.data
				})
			}
		},
		created() {
			if (this.$route.query.name) {
				this.addBread({
					name: this.$route.query.name,
					path: this.$route.path
				})
			}
			this.initData()
		},
		components: {
			'v-top-bar': TopBar,
			'v-card': Card
		}
	}
</script>

<style>
	
</style>
